<template>
    <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
// import axios from 'axios';
import { login } from "@/api/login"
export default {
    data() {

        // var username = (rule, value, callback) => {
        //     if (value === '') {
        //         callback(new Error('请输入账号'));
        //     } else {
        //         if (this.ruleForm.username !== '') {
        //             this.$refs.ruleForm.validateField('username');
        //         }
        //         callback();
        //     }
        // };
        // var password = (rule, value, callback) => {
        //     if (value === '') {
        //         callback(new Error('请输入密码'));
        //     } else {
        //         if (this.ruleForm.password !== '') {
        //             this.$refs.ruleForm.validateField('password');
        //         }
        //         callback();
        //     }
        // };
        return {
            ruleForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    // { required: true, message: '请输入活动名称', trigger: 'blur' },
                    // { validator: username, trigger: 'blur' },
                    // { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
                    { pattern: '^[a-zA-Z0-9_-]{4,16}$', message: '账号在4到16为字母数字和下划线' }
                ],
                password: [
                    // { validator: password, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // alert('submit!');
                    // 如果正常，则拿到form表单数据访问服务器
                    // 根据用户名和密码去查询数据库，如果有值，那么可以访问管理页面
                    // 否则提示用户名或者密码错误
                    // const res = await axios.post("http://192.168.0.64:1515/login", this.ruleForm);
                    const res = await login({ ...this.ruleForm });
                    console.log(this.ruleForm);
                    console.log(res);
                    if (res.data.msg == "success") {
                        this.$router.push("/home");
                    } else {
                        this.$message("用户名或者密码错误")
                    }
                } else {
                    // console.log('error submit!!');
                    // 直接提示格式不正确
                    // this.$alert('格式不正确', '提示', {
                    //     confirmButtonText: '确定',
                    //     callback: action => {
                    //         this.$message({
                    //             type: 'info',
                    //             message: `action: ${action}`
                    //         });
                    //     }
                    // })
                    this.$message("格式不正确")
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>